<template>
  <div>
    <div style="display: flex; align-items: center; margin-bottom: 10px">
      <div style="font-weight: bold" v-if="title">{{ title }}</div>
      <div style="margin-left: auto; display: flex">
        <el-button
          v-for="(item, index) in buttonList"
          style="height: 40px"
          :icon="item.icon"
          :key="index"
          :type="item.type"
          @click="item.methods"
          :plain="item.plain"
          >{{ item.text }}</el-button
        >
        <slot name="slot-buttonList"></slot>
        <el-button
          style="height: 40px; width: 40px; padding: 0; margin-left: 10px"
          icon="el-icon-refresh"
          @click="reset()"
        />
      </div>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%; border: 1px solid #ccc"
      v-loading="loading"
      :fit="true"
      header-align="center"
      :header-cell-style="{
        background: 'rgb(224, 241, 255)',
        color: '#606266',
      }"
      @selection-change="handleSelectionChange"
      :row-style="tableRowClassName"
    >
      <el-table-column
        type="selection"
        width="55"
        align="center"
        v-if="selector"
      />
      <el-table-column
        type="index"
        label="序号"
        v-if="ordinal"
        align="center"
        width="80"
        fixed="left"
      />
      <template v-for="(item, index) in tableItem">
        <el-table-column
          :prop="item.data"
          :label="item.porp"
          align="center"
          :fixed="item.fixed"
          :width="item.width"
        >
          <template v-slot:default="scope" v-if="item.solt">
            <slot v-bind="scope" :name="`slot-${item.solt}`">
              <!--插槽编号1，普通字符携带文字提示-->
              <el-tooltip
                class="item"
                effect="dark"
                v-if="getNestedProperty(scope.row, item.data)"
                :content="
                  item.data ? getNestedProperty(scope.row, item.data) : ''
                "
                placement="top"
              >
                <div
                  v-if="item.solt.name == 1"
                  style="display: flex; justify-content: center"
                >
                  <p class="slot1">
                    {{ getNestedProperty(scope.row, item.data) }}
                  </p>
                </div>
              </el-tooltip>
              <!--插槽编号2，可点击的字符-->
              <el-tooltip
                class="item"
                effect="dark"
                :content="
                  item.data ? getNestedProperty(scope.row, item.data) : ''
                "
                placement="top"
              >
                <div
                  v-if="item.solt.name == 2"
                  style="display: flex; justify-content: center"
                  @click="item.methods(scope.row)"
                >
                  <p class="slot2">
                    {{ getNestedProperty(scope.row, item.data) }}
                  </p>
                </div>
              </el-tooltip>
              <!--插槽编号3，状态表述-->
              <el-tag
                v-if="
                  item.solt.name == 3 &&
                  getNestedProperty(scope.row, item.data) !== null &&
                  getNestedProperty(scope.row, item.data) !== ''
                "
                :type="getTypeForState(scope.row, item)"
                style="border-radius: 20px; font-size: 14px"
              >
                {{ getNestedProperty(scope.row, item.data) }}</el-tag
              >
              <!--插槽编号4，签约方等-->
              <div v-if="item.solt.name == 4">
                <div v-for="label in scope.row[item.solt.property]">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="label"
                    placement="top"
                  >
                    <el-tag
                      type="info"
                      class="slot4"
                      style="
                        border-radius: 20px;
                        color: rgb(53, 55, 54);
                        font-size: 14px;
                      "
                    >
                      {{ label }}
                    </el-tag>
                  </el-tooltip>
                </div>
              </div>
              <!--插槽编号5，操作-->
              <div v-if="item.solt.name == 5">
                <div
                  v-if="statusColor"
                  style="
                    display: flex;
                    justify-content: center;
                    align-items: center;
                  "
                >
                  <div v-for="item in item.solt.operate">
                    <el-tooltip
                      class="item"
                      effect="dark"
                      :content="item.text"
                      placement="top"
                    >
                      <svg-icon
                        class-name="icon"
                        :icon-class="item.icon"
                        @click="item.methods(scope.row)"
                        style="height: 24px; width: 24px"
                      />
                    </el-tooltip>
                  </div>
                </div>
                <div
                  v-if="
                    !statusColor &&
                    (scope.row.status == 0 || scope.row.state == 0)
                  "
                  style="
                    display: flex;
                    justify-content: center;
                    align-items: center;
                  "
                >
                  <div v-for="item in item.solt.operate">
                    <el-tooltip
                      class="item"
                      effect="dark"
                      :content="item.text"
                      placement="top"
                    >
                      <svg-icon
                        class-name="icon"
                        :icon-class="item.icon"
                        @click="item.methods(scope.row)"
                        style="height: 24px; width: 24px"
                      />
                    </el-tooltip>
                  </div>
                </div>
                <div
                  v-if="
                    !statusColor &&
                    (scope.row.status == 1 || scope.row.state == 1)
                  "
                  style="
                    display: flex;
                    justify-content: center;
                    align-items: center;
                  "
                >
                  <div v-for="item in item.solt.operate">
                    <el-tooltip
                      class="item"
                      effect="dark"
                      :content="item.mark"
                      placement="top"
                    >
                      <svg-icon
                        class-name="icon"
                        :icon-class="item.markIcon"
                        style="height: 24px; width: 24px"
                        @click="item.methods02(scope.row)"
                      />
                    </el-tooltip>
                  </div>
                </div>
              </div>
              <!--插槽编号6，状态字典配置-->
              <div v-if="item.solt.name == 6">
                {{ getState(getNestedProperty(scope.row, item.data)) }}
              </div>
              <!--插槽编号7，性别字典配置-->
              <div v-if="item.solt.name == 7">
                {{ getSex(getNestedProperty(scope.row, item.data)) }}
              </div>
            </slot>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <div v-if="queryParams">
      <pagination
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script>
import { StateDictionary } from "./stateDictionary";
import { Sex } from "./stateDictionary";

export default {
  data() {
    return {
      selector: this.selector,
      ordinal: this.ordinal,
      queryParams: this.queryParams,
      tableItem: this.tableItem,
      tableData: this.tableData,
      loading: this.loading,
      total: this.total,
    }; //这里存放数据
  },
  props: {
    //是否加载
    loading: {
      type: Boolean,
      default: false,
    },
    //是否使用选择框
    selector: {
      type: Boolean,
      default: true,
    },
    //是否显示序号
    ordinal: {
      type: Boolean,
      default: true,
    },
    //总数据量
    total: {
      type: Number,
      required: true,
    },
    //翻页组件配置
    queryParams: {
      type: Object,
      required: true,
    },
    //表头内容配置
    tableItem: {
      type: Array,
      required: true,
    },
    //表格数据来源
    tableData: {
      type: Array,
      required: true,
    },
    //按钮列表
    buttonList: {
      type: Array,
      required: false,
    },
    //标题
    title: {
      type: String,
      required: false,
    },
    //状态是否影响颜色
    statusColor: {
      type: Boolean,
      required: false,
    },
  },
  components: {}, //import引入的组件需要注入到对象中才能使用
  computed: {}, //监听属性 类似于data概念
  watch: {}, //监控data中的数据变化
  methods: {
    reset() {
      this.$emit("reset");
    },
    getList() {
      this.$emit("getList");
    },
    handleSelectionChange(selection) {
      this.$emit("handleSelectionChange", selection);
    },
    tableRowClassName({ row, rowIndex }) {
      console.log(row.status);
      if (!this.statusColor) {
        if (row.status == 1 || row.state == 1) {
          return {
            color: "rgba(154, 155, 200, 0.8)",
          };
        } else {
          return {};
        }
      }
    },
    getState(state) {
      return StateDictionary[state];
    },
    getSex(sex) {
      return Sex[sex];
    },
    //获取el-tag的类型
    getTypeForState(row, item) {
      const value = this.getNestedProperty(row, item.data);
      console.log("123213123", item);
      console.log("321321321", row);
      const matchedState = item.solt.state.find(
        (state) => state.text === value
      );
      return matchedState ? matchedState.type : "";
    },
    getNestedProperty(obj, path) {
      if (!obj || !path) {
        return ""; // 如果 obj 或 path 不存在，返回空字符串
      }

      return (
        path.split(".").reduce((o, p) => {
          const match = p.match(/(\w+)\[(\d+)\]/);
          if (match) {
            const [, arrayProp, index] = match;
            return o && o[arrayProp] ? o[arrayProp][Number(index)] : undefined;
          }
          return o ? o[p] : undefined;
        }, obj) || ""
      ); // 如果结果是 null 或 undefined，返回空字符串
    },
  }, //方法集合
  created() {}, //生命周期 - 创建完成(可以访问当前this实例)
  mounted() {}, //生命周期 - 挂载完成（可以访问DOM元素）
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.slot2 {
  text-decoration: underline;
  cursor: pointer;
  color: rgb(24, 144, 255);
  font-size: 15px;
  width: 150px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.slot1 {
  width: 150px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.slot4 {
  width: 150px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.icon {
  cursor: pointer;
  color: white;
  margin: 5px;
}
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  height: 8px; /* 设置水平滚动条的高度 */
  z-index: 9999;
}
</style>
